সিএসএস৩ রাউন্ডেড কর্ণার (CSS3 Rounded Corner)


বৃত্তাকার ইবৃত্তাকার ইমেজ!মেজ!বৃত্তাকার ইমেজ!

সিএসএস(৩) বৃত্তাকার কর্ণার

আপনি কোনো ইমেজ বা একাধিক

ব্যবহার করা ছাড়াই যেকোনো এলিমেন্ট অথবা টেক্সটে বৃত্তাকার বর্ডার বা কর্ণার দিতে পারবেন। সিএসএস(৩) border-radius প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারেন।


এক নজরে বৃত্তাকার কর্ণারের সম্ভাব্য প্রোপার্টি-সমূহ

border-radius

বর্ডারের সবগুলো কর্ণারের আকৃতি সেট করে।

border-top-left-radius

বর্ডারের উপরের-বাম কর্ণারের আকৃতি সেট করে।

border-top-right-radius

বর্ডারের উপরের-ডান কর্ণারের আকৃতি সেট করে।

border-bottom-right-radius

বর্ডারের নিচের-ডান কর্ণারের আকৃতি সেট করে।

border-bottom-left-radius

বর্ডারের নিচের-বাম কর্ণারের আকৃতি সেট করে।


সিএসএস(৩) border-radius প্রোপার্টি

সিএসএস(৩) border-radius প্রোপার্টি ব্যবহার করে আপনি যেকোনো এলিমেন্টের কর্ণার বৃত্তাকার করতে পারেন।

নিচের উদাহরণে তা দেখানো হলোঃ

kt_satt_skill_example_id=1306

বিঃদ্রঃ border-radius প্রোপার্টিটি আসলে border-top-left-radius, border-top-right-radius, border-bottom-right-radius এবং border-bottom-left-radius প্রোপার্টিসমূহ একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।


বর্ডারে প্রতিটি কর্ণারে জন্য আলাদা-আলাদা ভ্যালু

আপনি যদি border-radius প্রোপার্টিতে ১টি ভ্যালু উল্লেখ করেন তাহলে এটি ৪টি কর্ণারের জন্যই প্রযোজ্য হবে।

যাইহোক, আপনি ইচ্ছা করলে প্রত্যেক কর্ণারের জন্যই ভিন্ন ভিন্ন ভ্যালু নির্ধারণ করতে পারেন। এক্ষেত্রে আপনি একটি থেকে চারটি পর্যন্ত ভ্যালু ব্যবহার করতে পারেন। border-radius প্রোপার্টিতে ভ্যালু ব্যবহার পদ্ধতি নিম্নে তুলে ধরা হলোঃ

  • চারটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান কর্ণার, তৃতীয় ভ্যালুটি নিচের-ডান কর্ণার এবং চতুর্থ ভ্যালুটি নিচের-বাম কর্ণারের জন্য প্রযোজ্য হবে।
  • তিনটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান এবং নিচের-বাম কর্ণার, এবং তৃতীয় ভ্যালুটি নিচের-ডান কর্ণারের জন্য প্রযোজ্য হবে।
  • দুইটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম এবং নিচের-ডান কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান এবং নিচের-বাম কর্ণারের জন্য প্রযোজ্য হবে।
  • একটি ভ্যালুঃ চারটি কর্ণারের জন্যই প্রযোজ্য হবে।

kt_satt_skill_example_id=1311


border-radius প্রোপার্টি ব্যবহার করে আপনি উপবৃত্তাকার কর্ণারও তৈরি করতে পারেনঃ

kt_satt_skill_example_id=1313

 

Content added || updated By

আরও দেখুন...

Promotion